<template>
  <div>
    <audio ref="refAudio" style="--plyr-control-spacing: 9px" :src="src" />
  </div>
</template>

<script setup lang="ts">
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
import { onMounted, ref } from 'vue'

const props = defineProps<{
  src: string
}>()
const refAudio = ref<HTMLAudioElement | null>(null)

onMounted(() => {
  if (refAudio.value) {
    const player = new Plyr(refAudio.value, {
      controls: ['play', 'progress', 'current-time', 'airpaly']
    })
    player.volume = 0.5
  }
})
</script>

<style scoped></style>
